<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品属性页面</title>
    <script src="../../static/vue.min.js"></script>
    <script src="../../static/axios.min.js"></script>
    <script src="../../static/global.js"></script>
</head>
<style>
    .layui-unselect dl { max-height:200px; }
</style>
<body>
<div id="app">
<!-- 添加属性名 -->
<form style="display: none" id="attrForm"  class="layui-form" action="">

    <div class="layui-form-item">
        <label class="layui-form-label">属性名</label>
        <div class="layui-input-block">
            <input type="text" name="attr_name" id="attr_name" required  lay-verify="required" placeholder="请输入属性名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">请选择类型</label>
        <div class="layui-input-block">
            <select id="attr_type" >
                <option value="0">销售属性</option>
                <option value="1">基本属性</option>
                <option value="2">既是销售属性又是基本属性</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">请选择分类</label>
        <div class="layui-input-block">
            <select id="cat_id" >
           <option  v-bind:value="category.cat_id" v-for=" category in resultCatelog">{{category.name}}</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemoadd" id="attrNameBtn">立即添加</button>
        </div>
    </div>
</form>

<!-- 修改属性名 -->
<form style="display: none" id="putForm" lay-filter="putformlayfilter" class="layui-form" action="">
    <input type="hidden" name="attr_id">
    <input type="hidden" name="category_attr_id">
    <div class="layui-form-item">
        <label class="layui-form-label">属性名</label>
        <div class="layui-input-block">
            <input type="text" name="attr_name" required  lay-verify="required" placeholder="请输入属性名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">请选择类型</label>
        <div class="layui-input-block">
            <select name="attr_type" lay-filter="aihao">
                <option value="0">销售属性</option>
                <option value="1">基本属性</option>
                <option value="2">既是销售属性又是基本属性</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否需要检索</label>
        <div class="layui-input-block">
            <select name="search_type" lay-filter="aihao" >
                <option value="1">是</option>
                <option value="0">否</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">启用状态</label>
        <div class="layui-input-block">
            <select name="enable" lay-filter="aihao">
                <option value="1">启用</option>
                <option  value="0">禁用</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">请选择分类</label>
        <div class="layui-input-block">
            <select name="cat_id" lay-filter="aihao">
                <option  v-bind:value="category.cat_id" v-for=" category in resultCatelog">{{category.name}}</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemoput" id="putattrNameBtn">立即修改</button>
        </div>
    </div>
</form>
</div>
<!-- 搜索 -->
<div class="layui-form">

        <div class="layui-input-inline">
            <label class="layui-form-label">输入属性名</label>
            <div class="layui-input-block">
                <input type="text" id="searchName"  placeholder="请输入属性名" class="layui-input" />

            </div>
        </div>
    <div class="layui-input-inline">
        <div class="layui-input-block">
            <button id="searchbtn" class="layui-btn">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
        </div>
    </div>
    <div class="layui-input-inline">
        <div class="layui-input-block">
            <input type="button" class="layui-btn" value="添加属性" id="addAttr">
        </div>
    </div>
</div>

<table id="attrTab" lay-filter="toolfilter"></table>

</body>

<script>
    layui.use(['form','table','layer'],function (){
        let form=layui.form;
        let table=layui.table;
        let layer=layui.layer;
        let $=layui.$;

        //先默认查询去全部的属性信息
        table.render({
            elem:'#attrTab',
            url:glodate.serverZuul+'pmsAttr/findAllAttr',
            id:'attrReload',
            page:true,
            cols:[[
                {
                    field:'attr_id',
                    title:'属性id',
                    fixed:'left',
                    width:100
                },
                {
                    field:'attr_name',
                    title:'属性名',
                    fixed:'left',
                    width:100
                },
                {
                    field:'search_type',
                    title:'是否需要检索',
                    fixed:'left',
                    width:100,
                    templet:function (d){
                        let category_attr_id=d.category_attr_id;
                        if (d.search_type == 0) {
                            return '<input type="checkbox" lay-filter="search_type" value="'+category_attr_id+'" name="search_type" lay-skin="switch" lay-text="是|否" >'
                        } else {
                            return '<input type="checkbox" lay-filter="search_type" value="'+category_attr_id+'" name="search_type" lay-skin="switch" lay-text="是|否" checked >'
                        }
                    }
                },
                {
                    field:'attr_type',
                    title:'属性类型',
                    fixed:'left',
                    width:100,
                    templet:function (d){
                        if(d.attr_type==0){
                            return '销售属性'
                        }else if(d.attr_type==1){
                            return '基本属性'
                        }else{
                            return '既是销售属性又是基本属性'
                        }
                    }
                },
                {
                    title:'启用状态',
                    fixed:'left',
                    width:100,
                    templet:function (d){
                        let category_attr_id=d.category_attr_id;
                        if (d.enable == 0) {
                            return '<input type="checkbox" lay-filter="attrEnable" value="'+category_attr_id+'" name="enable"  lay-skin="switch" lay-text="是|否" >'
                        } else {
                            return '<input type="checkbox" lay-filter="attrEnable" value="'+category_attr_id+'" name="enable" lay-skin="switch" lay-text="是|否" checked >'
                        }
                    }
                },
                {
                    field:'catelog_name',
                    title:'所属分类',
                    fixed:'left',
                    width:100,
                },
                {
                    title:'操作',
                    fixed:'left',
                    width:220,
                    toolbar:'#tooltab'
                },
            ]]
        })
//监听启用状态
        form.on('switch(attrEnable)', function(data) {
            let id = data.value;
            //alert(id);
            if (data.elem.checked) {
                //上锁
                $.ajax({
                    url: glodate.serverZuul + "pmsAttr/putAttrCategory",
                    method: 'put',
                    dataType: 'json',
                    data: {
                        'enable': 1,
                        'category_attr_id': id
                    },
                    success: function(res) {
                     //   console.log(res);
                     //   alert(res.code)
                        if (res.code == 200) {
                            layer.msg("启用成功");
                        }else{
                            layer.alert(res.msg)
                        }
                    }
                })
            } else {
                //解锁
                $.ajax({
                    url: glodate.serverZuul + "pmsAttr/putAttrCategory",
                    method: 'put',
                    dataType: 'json',
                    data: {
                        'enable': 0,
                        'category_attr_id': id
                    },
                    success: function(res) {
                        if (res.code == 200) {
                            layer.msg("禁用成功");
                        }else{
                            layer.alert(res.msg)
                        }
                    }
                })
            }
            return false;

        });
        //监听检索状态
        form.on('switch(search_type)', function(data) {
            console.log(data);
            let id = data.value; //拿到存到value里的id
            //alert(id);
            if (data.elem.checked) {
                //上锁
                $.ajax({
                    url: glodate.serverZuul + "pmsAttr/putAttrCategory",
                    method: 'put',
                    dataType: 'json',
                    data: {
                        'search_type': 1,
                        'category_attr_id': id
                    },
                    success: function(res) {
                        //   console.log(res);
                        //   alert(res.code)
                        if (res.code == 200) {
                            layer.msg("启用成功");
                        }else{
                            layer.alert(res.msg)
                        }
                    }
                })
            } else {
                //解锁
                $.ajax({
                    url: glodate.serverZuul + "pmsAttr/putAttrCategory",
                    method: 'put',
                    dataType: 'json',
                    data: {
                        'search_type': 0,
                        'category_attr_id': id
                    },
                    success: function(res) {
                        if (res.code == 200) {
                            layer.msg("取消成功");
                        }else{
                            layer.alert(res.msg)
                        }
                    }
                })
            }
            return false;

        });

        //打开添加页面
        $('#addAttr').on('click',function (){
            layer.open({
                type:1,
                area:['500px','500px'],
                content:$('#attrForm'),
                title:'添加属性'
            })

            return false;
        })


        //监听工具条
        table.on('tool(toolfilter)',function (obj) {
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            let attrId=data.attr_id;

            if (layEvent == "exit") {
                console.log(data);
                form.val('putformlayfilter',data);
                layer.open({
                    type:1,
                    area:['500px','530px'],
                    content:$('#putForm'),
                    title:'修改属性'
                })

            }else if(layEvent == "del"){
                Swal.fire({
                    icon:'error',
                    title:'删除属性信息',
                    text:"删除后将无法恢复，请谨慎操作",
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: '确定',
                    showCancelButton: true,
                    cancelButtonColor: '#d33',
                    cancelButtonText: "取消"
                }).then((x)=>{
                    //如果为true的时候，也就是点击了确定按钮
                    if(x.value){
                        $.ajax({
                            url:glodate.serverZuul+"pmsAttr/delAttr",
                            method:'delete',
                            data:{'attr_id':attrId},
                            dataType:'json',
                            success:function (res){
                                if(res.code==200){
                                    Swal.fire({
                                        title:'删除成功',
                                        text:'点击确定刷新页面',
                                        icon:'success',
                                        confirmButtonText: '确定'
                                    }).then((x)=>{
                                        if(x){
                                            location.reload();
                                        }
                                    })
                                }else if(res.code==500){
                                    Swal.fire({
                                        title:'服务器在开小差',
                                        text:'请稍后再试',
                                        icon:'warning',
                                    })
                                }
                            }
                        })
                    }

                })
            }
        })
        //添加操作
        form.on('submit(formDemoadd)',function (){
            let name=$('#attr_name').val();
            let attr_type=$('#attr_type').val();
            let cat_id=$('#cat_id').val()
           // alert(attr_type);

            $.ajax({
                url:glodate.serverZuul+"pmsAttr/addAttr",
                method:'post',
                data:{
                    'attr_name':name,
                    'attr_type':attr_type,
                    'cat_id':cat_id,
                    'enable':0,
                    'search_type':0,
                },
                dataType:'json',
                success:function (res){
                    if(res.code==200){
                        layer.msg('添加成功', {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            location.reload()
                            //do something
                        });
                    }else if(res.code==500){
                        layer.alert(res.msg);
                    }
                }
            })

            return false;
        })

        //修改操作
        form.on('submit(formDemoput)',function (){

            $.ajax({
                url:glodate.serverZuul+"pmsAttr/putAttrCategory",
                method:'put',
                data:form.val('putformlayfilter'),
                dataType:'json',
                success:function (res){
                    if(res.code==200){
                        layer.msg('修改成功', {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            location.reload()
                            //do something
                        });
                    }else if(res.code==500){
                        layer.alert(res.msg);
                    }
                }
            })

            return false;
        })
        //重载表格
        $('#searchbtn').on('click',function (){
             let name=$('#searchName').val();
            table.reload('attrReload',{
                where:{
                    'name':name
                }
            })
            return false;
        })
    })

</script>

<script id="tooltab" type="text/html">
    <input type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="exit" value="修改">
    <input type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del" value="删除">
</script>


<script>

    new Vue({
        el:'#app',
        data:{
            resultCatelog:[]
        },
        created () {
            this.getTree()
        },
        methods:{
            //查找三级分类
            getTree(){
                axios.get(glodate.serverZuul+"category/getCategoryByThree").then(response=>{
                    this.resultCatelog=response.data.data;
                    console.log(response.data.data);

                })
            },
        }
    })

</script>
</html>